<template>
  <!-- 首页地图左侧部分 -->
  <div
    class="index-left-ahfklajklfjdasklfjasklahdsjkfj imColumn"
    style="opacity: 1"
  >
    <!-- 组织机构 -->
    <div
      class="part-bg"
      v-loading="twoLoading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >

      <!-- 组织 -->
      <cameraTree
        :sourceData="cameraTreeList"
        @orgClick="clickTree"
      ></cameraTree>
    </div>
  </div>
</template>

<script>
import util from "@/libs/util";
import * as api from "./api.js";
import cameraTree from "../cameraTrees";
export default {
  components: {
    cameraTree,
  },
  data() {
    return {
      twoLoading: false,
      cameraStoreMap: {}, // 相机类型临时存储
      oneLoading: false,
      roadList: [],
      treeData: [],
      cameraTreeList: [],
      treeSelected: 0,
      menuSelected: 0,
      menuList: [],
      clusterCameras: [], // 聚合打点数据
    };
  },
  created() {},
  mounted() {
    this.getCameraTreeselect();
  },
  methods: {
    /**
     * 点击左侧树结构
     */
    clickTree(val) {
      this.$emit("orgClick", val);
    },

    /** 查询部门下拉树结构 */
    getCameraTreeselect() {
      this.twoLoading = true;
      var treeData = this.$store.state.user.cameraOrgTree;
      console.log(treeData, "treedata");
      if (util.isNotEmpty(treeData)) {
        // 接口有数据 不再重新获取
        this.cameraTreeList = treeData;
        this.twoLoading = false;
      } else {
        api.treeCameraData().then((response) => {
            console.log(response);
            console.log(response.data);
            this.twoLoading = false;
            setTimeout(() => {
              this.cameraTreeList = response.data;
              this.$store.commit("SET_CAMERA_ORG_TREE", response.data); // 存储
            }, 10);
          })
          .catch((err) => {
            this.twoLoading = false;
            console.log(err);
          });
      }
    },
  },
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.title-bg {
  background-image: url("../../../assets/images/index-title.png") !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-left: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.roadtext {
  font-family: "AlibabaPuHuiTi-Regular";
  // color: #31A6FF;
  letter-spacing: 0;
  line-height: 19px;
  font-weight: 400;
}

.smalltext {
  transform: scale(0.9); // vue最小字体为12px
  transform-origin: left top;
}

.hoverClass:hover {
  // background-color: #B0C4DE!important;
  background: linear-gradient(
    to right,
    rgb(3, 22, 39),
    rgb(16, 87, 139)
  ) !important;
}

.title-text {
  font-family: "PangMenZhengDao";
  font-size: 14px;
  letter-spacing: 2.91px;
  line-height: 18px;
  text-shadow: 0 1px 2px rgba(0, 15, 39, 0.72);
  font-weight: bold;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  color: #ffea00;
}

.title {
  font-family: "PangMenZhengDao";
  font-size: 12px;
  color: white;
  letter-spacing: 2.91px;
  line-height: 18px;
  text-shadow: 0 1px 2px rgba(0, 15, 39, 0.72);
  font-weight: bold;
}

.part-bg {
  background-image: linear-gradient(to bottom, #000813, #001a36);
  opacity: 0.8;
  height: 100%;
  width: 18vw;
}

.tree-selected {
  background: linear-gradient(to right, #0e5995, #0f437d);
}
</style>

<style lang="scss">
.index-left-ahfklajklfjdasklfjasklahdsjkfj {
  position: absolute;
  left: 6px;
  height: calc(100% - 62px);
  width: 17vw;
  z-index: 900;
}
</style>